<template>
  <view class="">
    <!-- 柱状图 -->
    <view class="charts-box">
      <qiun-data-charts type="column" :localdata="localdata"></qiun-data-charts>
    </view>
    <!-- 饼图 -->
    <view class="pie charts-box">
      <qiun-data-charts type="pie" :opts="opts" :chartData="pieChartData" :canvas2d="canvas2d" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      default: {
        // color: ['#ab342a', '#bcd332', '#cfcc43', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: '#FFFFFF'
          }
        }
      },
      pieChartData: {
        series: [
          {
            data: [
              {
                name: '一班',
                value: 50
              },
              {
                name: '二班',
                value: 30
              },
              {
                name: '三班',
                value: 20
              },
              {
                name: '四班',
                value: 18
              },
              {
                name: '五班',
                value: 8
              }
            ]
          }
        ]
      },
      // 只有一组数据直接渲染
      localdata: [
        { value: 50, text: '一班' },
        { value: 30, text: '二班' },
        { value: 20, text: '三班' },
        { value: 18, text: '四班' },
        { value: 8, text: '五班' }
      ],
      // 多组数据
      chartData: {
        categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
        series: [
          {
            name: '目标值',
            data: [35, 36, 31, 33, 13, 34],
            color: 'pink'
          },
          {
            name: '完成量',
            data: [18, 27, 21, 24, 6, 28]
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.charts-box {
  width: 500rpx;
  height: 400rpx;
}
</style>
